<template>
    <div>
        <h3>食谱列表</h3>
        菜谱标题：<input type="text" v-model="info.Title">
        分类：
        <select v-model="info.Cid">
            <option value="">请选择</option>
            <option :value="i.Cid" v-for="i in list">{{ i.Cname }}</option>
        </select>
        <input type="button" value="查询" class="btn btn-info" @click="show">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>菜谱标题</td>
                    <td>分类</td>
                    <td>标签</td>
                    <td>菜谱封面</td>
                    <td>状态</td>
                    <td>时间</td>
                    <td>菜谱详情</td>
                    <td>操作</td>
                </tr>
                <tr v-for="i in arr" :key="i.Id">
                    <td>{{ i.Title }}</td>
                    <td>{{ i.Cname }}</td>
                    <td>{{ i.Ftag }}</td>
                    <td><img :src="i.Fimg" width="60" height="60" ></td>
                    <td>{{ i.State==true?"已发布":"未发布" }}</td>
                    <td>{{ moment(i.Ftime).format("YYYY-MM-DD") }}</td>
                    <td>{{ i.Detail }}</td>
                    <td><input type="button" value="编辑" class="btn btn-info">
                    <input type="button" value="删除" class="btn btn-danger"></td>
                    
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute();
const routr = useRouter();
onMounted(()=>{
    getclass();
    show();
})
//分类下拉框
let list:any=ref([]);
const getclass=()=>{
    axios({
        url:"/api/Food/GetClass",
        method:"get",
    })
    .then(res=>{
        list.value=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//显示
let arr: any = ref([]);
let info: any = reactive({
    Title: "",
    Cid: ""
})
const show=()=>{
    axios({
        url:"/api/Food/ShowFood",
        method:"get",
        params:info
    })
    .then(res=>{
        arr.value=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

</script>

<style scoped></style>